"use client";
import React, { useEffect, useState, useRef } from "react";
import styles from "./page.module.css";
import useSWR from "swr";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import Image from "next/image";
import { toast, Toaster } from "react-hot-toast";
import MyButton from "@/components/button/MyButton";

const Dashboard = () => {
  // 新增：表单引用，用于重置
  const formRef = useRef(null);

  const { data: session, status } = useSession();
  const router = useRouter();
  const [selectedImage, setSelectedImage] = useState(null); // 存储选中的图片文件
  const [imagePreview, setImagePreview] = useState(""); // 图片预览URL
  const fileInputRef = useRef(null); // 文件输入框引用
  // 新增：编辑模式状态（存储当前编辑的文章ID和数据）
  const [editingPost, setEditingPost] = useState(null); // 格式: { id: "...", title: "...", ... }

  // SWR 数据获取配置
  const fetcher = (...args) => fetch(...args).then((res) => res.json());

  const { data: posts, mutate, error, isLoading } = useSWR(
    status === "authenticated" ? `/api/posts?username=${session?.user?.name}` : null,
    fetcher
  );

  // 未登录状态处理
  useEffect(() => {
    if (status === "unauthenticated") {
      router.push("/dashboard/login");
    }
  }, [status, router]);

  // 加载状态显示
  if (status === "loading") {
    return <div className={styles.loading}>加载中...</div>;
  }

  // 未登录时不渲染内容
  if (status === "unauthenticated") {
    return null;
  }

  // 处理图片选择（预览和状态更新）
  const handleImageSelect = (e) => {
    const file = e.target.files[0];
    if (file) {
      setSelectedImage(file);
      // 生成预览URL
      const previewUrl = URL.createObjectURL(file);
      setImagePreview(previewUrl);
    }
  };

  // 触发文件选择对话框
  const triggerFileSelect = () => {
    fileInputRef.current.click();
  };
  // 新增：点击文章进入编辑模式
  const handleEdit = (post) => {
    setEditingPost(post); // 存储当前编辑的文章数据
    // 填充表单数据
    setImagePreview(post.img); // 显示原有图片预览
    // 如果图片是本地路径（非URL），无法直接预览，需特殊处理
    if (post.img?.startsWith("/")) {
      setImagePreview(post.img); // 本地图片用相对路径预览
    } else {
      setImagePreview(post.img); // 网络图片直接预览
    }
  };
  // 新增：取消编辑，重置表单
  const handleCancelEdit = () => {
    setEditingPost(null);
    setSelectedImage(null);
    setImagePreview("");
    // 重置表单输入（需获取表单引用）
    if (formRef.current) formRef.current.reset();
  };
  // 处理发布文章（支持文件上传）
  // 处理表单提交（支持新增和更新）
  const handleSubmit = async (e) => {
    e.preventDefault();
    const title = e.target.title.value;
    const desc = e.target.desc.value;
    const content = e.target.content.value;
    const imgUrl = e.target.imgUrl.value;

    if (!title || !desc || !content) {
      toast.error("请填写完整文章信息");
      return;
    }

    try {
      const formData = new FormData();
      formData.append("title", title);
      formData.append("desc", desc);
      formData.append("content", content);
      formData.append("username", session.user.name);
      const validateImageUrl = (url) => {
        if (!url) return true; // 空URL不验证
        const urlRegex = /^https?:\/\/.+/i;
        const extRegex = /\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i;
        return urlRegex.test(url) && extRegex.test(url);
      };

      // 在handleSubmit中调用
      if (!selectedImage && imgUrl) {
        if (!validateImageUrl(imgUrl)) {
          toast.error("图片URL格式无效，请使用http/https开头的图片链接（支持jpg、png等格式）");
          return;
        }
      }
      // 图片处理（保持不变）
      if (selectedImage) {
        formData.append("image", selectedImage);
        formData.append("imgUrl", "");
      } else {
        formData.append("imgUrl", imgUrl || editingPost?.img || ""); // 编辑时保留原有图片
      }

      let res;
      if (editingPost) {
        // 编辑模式：调用PUT接口更新文章
        res = await fetch(`/api/posts/${editingPost._id}`, {
          method: "PUT",
          body: formData,
        });
      } else {
        // 新增模式：调用POST接口创建文章
        res = await fetch("/api/posts", {
          method: "POST",
          body: formData,
        });
      }

      if (res.ok) {
        toast.success(editingPost ? "文章更新成功！" : "文章发布成功！");
        mutate(); // 重新获取文章列表
        // 重置表单
        e.target.reset();
        setSelectedImage(null);
        setImagePreview("");
        setEditingPost(null); // 退出编辑模式
      } else {
        const errorData = await res.json();
        toast.error(errorData.message || "操作失败，请重试");
      }
    } catch (err) {
      console.error("操作失败:", err);
      toast.error("网络错误，操作失败");
    }
  };

  // 处理删除文章
  const handleDelete = async (id) => {
    if (window.confirm("确定要删除这篇文章吗？")) {
      try {
        await fetch(`/api/posts/${id}`, {
          method: "DELETE",
        });
        mutate(); // 重新获取数据
        toast.success("文章已删除");
      } catch (err) {
        console.error("删除失败:", err);
        toast.error("删除失败，请重试");
      }
    }
  };

  return (
    <div className={styles.container}>

      <div className={styles.layout}>
        {/* 左侧：文章列表 */}
        <div className={styles.postsSection}>
          <h2 className={styles.sectionTitle}>我的文章</h2>

          {isLoading ? (
            <div className={styles.loading}>加载文章中...</div>
          ) : error ? (
            <div className={styles.error}>加载失败，请刷新页面重试</div>
          ) : posts && posts.length > 0 ? (
            <div className={styles.postsList}>
              {posts.map((post) => (
                <div
                  className={styles.postItem}
                  key={post._id}
                  // 点击文章项进入编辑模式
                  onClick={() => handleEdit(post)}
                >
                  <div className={styles.postImage}>
                    <Image
                      src={post.img || "/contact.png"}
                      alt={post.title}
                      width={120}
                      height={80}
                      className={styles.image}
                      onError={(e) => {
                        e.target.src = "/placeholder.png";
                      }}
                    />
                  </div>
                  <div className={styles.postInfo}>
                    <h3 className={styles.postTitle}>{post.title}</h3>
                    <p className={styles.postDesc}>
                      {post.desc.length > 50
                        ? `${post.desc.substring(0, 50)}...`
                        : post.desc}
                    </p>
                  </div>
                  <div className={styles.postActions}>
                    {/* 删除按钮（阻止事件冒泡，避免触发编辑） */}
                    <button
                      className={styles.deleteBtn}
                      onClick={(e) => {
                        e.stopPropagation(); // 关键：防止点击删除时触发文章编辑
                        handleDelete(post._id);
                      }}
                    >
                      删除
                    </button>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className={styles.emptyState}>暂无文章，快来发布第一篇吧！</div>
          )}
        </div>

        {/* 右侧：发布/编辑表单 */}
        <div className={styles.formSection}>
          {/* 标题根据模式切换 */}
          <h2 className={styles.sectionTitle}>
            {editingPost ? "编辑文章" : "发布新文章"}
          </h2>

          <form
            ref={formRef} // 绑定表单引用
            className={styles.postForm}
            onSubmit={handleSubmit}
          >
            {/* 标题输入框（编辑时填充原有内容） */}
            <div className={styles.formGroup}>
              <input
                type="text"
                name="title"
                placeholder="文章标题"
                className={styles.input}
                required
                defaultValue={editingPost?.title} // 编辑模式填充
              />
            </div>

            {/* 简介输入框 */}
            <div className={styles.formGroup}>
              <input
                type="text"
                name="desc"
                placeholder="文章简介"
                className={styles.input}
                required
                defaultValue={editingPost?.desc} // 编辑模式填充
              />
            </div>

            {/* 图片上传区域（保持不变） */}
            <div className={styles.formGroup}>
              <label className={styles.imageLabel} onClick={triggerFileSelect}>
                {imagePreview ? (
                  <div className={styles.previewContainer}>
                    <Image
                      src={imagePreview}
                      alt="预览"
                      width={200}
                      height={120}
                      className={styles.previewImage}
                    />
                    <span className={styles.changeText}>点击更换图片</span>
                  </div>
                ) : (
                  <div className={styles.uploadArea}>
                    <span>点击上传封面图片</span>
                  </div>
                )}
                <input
                  ref={fileInputRef}
                  type="file"
                  accept="image/*"
                  className={styles.fileInput}
                  onChange={handleImageSelect}
                />
              </label>
            </div>

            {/* 图片URL输入框 */}
            <div className={styles.formGroup}>
              <input
                type="url"
                name="imgUrl"
                placeholder={`或输入图片URL（可选，默认图片需要上传`}
                className={styles.input}
                defaultValue={editingPost?.img?.startsWith("http") ? editingPost.img : ""} // 编辑模式填充URL（仅网络图片）
              />
            </div>

            {/* 内容输入框 */}
            <div className={styles.formGroup}>
              <textarea
                name="content"
                placeholder="文章内容"
                className={styles.textarea}
                rows={6}
                required
                defaultValue={editingPost?.content} // 编辑模式填充
              ></textarea>
            </div>

            {/* 按钮区域：根据模式显示不同按钮 */}
            <div className={styles.buttonGroup}>
              <button type="submit" className={styles.submitBtn}>
                {editingPost ? "更新文章" : "发布文章"}
              </button>

              {/* 编辑模式显示“取消编辑”按钮 */}
              {editingPost && (
                <button
                  type="button"
                  className={styles.cancelBtn}
                  onClick={handleCancelEdit}
                >
                  取消编辑
                </button>
              )}
            </div>
          </form>
         
        </div>
        <MyButton text="其他工具页面导航" url="/dashboard/nav" />
      </div>

      {/* <Toaster position="top-right" /> */}

    </div>
  );
};

export default Dashboard;